import React from "react";
import Title from "../components/Title";
import SDTable from "../dataManage/SDTable";
import api from "../../api";
import { render } from "@testing-library/react";
import { companyMap, companyMap2 } from "../components/common";
import { Button, Form, Modal, Input, Col, Row, Select, InputNumber, message } from "antd";
import useReducer from "src/hooks/useReducer";
//import './index.scss'
const layout = {
  labelCol: { span: 11 },
  wrapperCol: { span: 16 },
};
export default function ClxxManage() {
  const formRef = React.useRef();
  const actionRef = React.useRef();
  const [form] = Form.useForm();

  const [sate, dispatch] = useReducer({
    visible: false, // 抽屉弹窗
    editId: "", // 编辑id
    title: "", // 抽屉标题
  });
  const { visible, editId, title } = sate;

  const columns = [
    {
      title: "车牌号",
      dataIndex: "licensePlate",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "车型",
      dataIndex: "model",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "容量",
      dataIndex: "capacity",
      width: 150,
      ellipsis: true,
    },

    {
      title: "司机姓名",
      dataIndex: "driverName",
      width: 150,
      ellipsis: true,
    },
    {
      title: "司机电话",
      dataIndex: "driverPhone",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "司机驾照号码",
      dataIndex: "licenseNumber",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "所属公司",
      dataIndex: "companyId",
      width: 80,
      ellipsis: true,
      hideInSearch: true,
      render: (text, record) => {
        return companyMap[record.companyId];
      },
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      hideInSearch: true,

      width: 150,
      fixed: "right",
      render: (text, record) => (
        <div style={{ fontWeight: "bold" }}>
          {/* <a style={{ marginRight: 15 }} onClick={handleAdd}>新增</a> */}
          <a onClick={() => handleEdit(record)}>编辑</a>
        </div>
      ),
    },
  ];

    // 新增
    const handleAdd = () => {
      form.resetFields();
      dispatch({
        visible: true,
        editId: "",
        title: "新增",
      });
    };
  
    // 编辑
    const handleEdit = (record) => {
      form.setFieldsValue({
        ...record,
        companyId: companyMap[record.companyId],
      });
      dispatch({
        visible: true,
        editId: record.busId,
        title: "编辑",
      });
    };

    
  //保存
  const save = () => {
    form.validateFields().then((values) => {
        const params = {
          ...values,
          
        }
        editId && (params.busId = editId);
     
        // 如果是新增， 那么userCreate 就是设置当前时间 
        
          params.companyId = companyMap2[params.companyId] || 0;
        

        const remote = editId ? api.editClxx : api.addClxx;

        remote(params).then((res) => {
          if (res.success) {
            dispatch({ visible: false });
            actionRef.current.reload();
            message.success("操作成功");
          }else {
            message.error(res.message || "操作失败");
          }
        }
      );
    });
  }
  return (
    <div className="css">
      <div style={{ padding: "0 100px" }}>
        <Title title={"车辆管理"}></Title>
        <SDTable
          formRef={formRef}
          actionRef={actionRef}
          requestApi={api.clxx}
          columns={columns}
          options={false}
          toolBarRender={() => [
            <Button type="primary" key="1" onClick={handleAdd}>
              新增
            </Button>,
          ]}
          //   search={false}
        ></SDTable>
         <Modal
        visible={visible}
        title={`${title}车辆信息`}
        width={900}
        onCancel={() => dispatch({ visible: false })}
        footer={[
          <Button key="back" onClick={() => dispatch({ visible: false })}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={save}>
            确定
          </Button>,
        ]}
      >
        <Form form={form}>
          <Form form={form} {...layout}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="licensePlate"
                  label="车牌号"
                  rules={[
                    {
                      required: true,
                      message: "车牌号不能为空",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="model"
                  label="车型"
                 
                >
                  <Input  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="capacity"
                  label="容量"
                  
                >
                  <Input  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="driverName"
                  label="司机姓名"
                
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
            <Col span={12}>
                <Form.Item
                  name="driverPhone"
                  label="司机电话"
                  
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="licenseNumber"
                  label="司机驾照号码"
                  
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
              </Row>
              <Col span={12}>
                <Form.Item
                  name="companyId"
                  label="所属公司"
                  
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
          </Form>
        </Form>
      </Modal>
      </div>
    </div>
  );
}
